<template>
    <div class="shop">
        <!-- <div class="head flex-a flex-b">
            <div class="left flex-a">
                <div>预订单</div>
                <div class="btn flex-a">
                    <div class="day">近两日</div>
                    <div class="flex-a date">
                        <span>选择日期</span>
                        <RectDown color="#fff" size="14" />
                    </div>
                </div>
            </div>
            <div class="right">
                <Search color="#fff" size="16" />
            </div>
        </div> -->
        <div class="head flex-a flex-b">
            <div class="left flex-a">
                <div>订单信息</div>
                <div class="btn flex-a">
                    <div :class="tab == '0' ? 'active day' : 'day'" @click="change('0')">全部</div>
                    <div :class="tab == '1' ? 'active jin' : 'jin'" @click="change('1')">近两日</div>
                </div>
            </div>
            <div class="right">
                <!-- <Search color="#fff" size="16" /> -->
            </div>
        </div>
        <div class="tabs">
            <nut-tabs v-model="value" @change="changeTab">
                <nut-tab-pane :title="item.title" :pane-key="item.key" v-for="item in status" :key="item.key">
                    <div class="order-box" style="padding-bottom: 50px;" v-if="item.key == value">
                        <div class="list" v-if="tab == '0'">
                            <div class="order-detail" v-if="list" v-for="item in list" :key="item.id">
                                <div class="order-head flex-a flex-b">
                                    <div class="left flex-a">
                                        <span>#</span>
                                        <div>1</div>
                                        <div class="blue">尽快送达</div>
                                    </div>
                                    <div class="right">{{ item.state == 2 ? '进行中' : item.state == 4 ? '已完成' :
                        item.state == -1 ? '已取消' : '' }}
                                    </div>
                                </div>
                                <div class="order-box">
                                    <div class="order-title flex-a flex-b">
                                        <div class="name">{{ item.vipName }}</div>
                                        <div class="flex-a">
                                            <!-- <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_3.png" alt=""> -->
                                            <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                        </div>
                                    </div>
                                    <!-- <div class="info">第一次下单·收藏用户</div> -->
                                    <div class="addr">{{ item.datVipAddress.address + item.datVipAddress.detAddress
                                        }}
                                    </div>
                                    <!-- <div class="status flex-a flex-b">
                                    <div class="time flex-a">
                                        <div>12:18</div>
                                        <div>已送达（骑手:融资达）</div>
                                    </div>
                                    <div class="flex-a">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_18.png" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                    </div>
                                </div>
                                <div class="process flex-a flex-b">
                                    <div class="flex-a"><span>展开进度</span>
                                        <RectDown color="#3B84F1" size="14" />
                                    </div>
                                    <div><nut-button type="default">我要索赔</nut-button></div>
                                </div> -->
                                    <div class="open flex-a flex-b">
                                        <div>一件商品</div>
                                        <!-- <div class="blue">展开</div> -->
                                    </div>
                                    <div class="total flex-a">
                                        <span>本单预计收入</span>
                                        <!-- <Ask color="#686B72" size="14" /> -->
                                        <nut-tag type="success">已支付</nut-tag>
                                        <div class="price">￥{{ item.price }}</div>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <nut-empty description="暂无数据"></nut-empty>
                            </div>
                        </div>
                        <div class="list" v-if="tab == '1'">
                            <div :class="timeType == '0' ? 'active flex-a flex-b item' : 'flex-a flex-b item'"
                                @click="changeType('0')">
                                <div>今日 <text></text></div>
                                <div v-if="list.length == 0">暂无订单</div>
                            </div>
                            <div class="order-detail" v-if="timeType == '0'" v-for="item in list" :key="item.id">
                                <div class="order-head flex-a flex-b">
                                    <div class="left flex-a">
                                        <span>#</span>
                                        <div>1</div>
                                        <div class="blue">尽快送达</div>
                                    </div>
                                    <div class="right">{{ item.state == 2 ? '进行中' : item.state == 4 ? '已完成' :
                        item.state == -1 ? '已取消' : '' }}
                                    </div>
                                </div>
                                <div class="order-box">
                                    <div class="order-title flex-a flex-b">
                                        <div class="name">{{ item.vipName }}</div>
                                        <div class="flex-a">
                                            <!-- <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_3.png" alt=""> -->
                                            <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                        </div>
                                    </div>
                                    <!-- <div class="info">第一次下单·收藏用户</div> -->
                                    <div class="addr">{{ item.datVipAddress.address + item.datVipAddress.detAddress
                                        }}
                                    </div>
                                    <!-- <div class="status flex-a flex-b">
                                    <div class="time flex-a">
                                        <div>12:18</div>
                                        <div>已送达（骑手:融资达）</div>
                                    </div>
                                    <div class="flex-a">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_18.png" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                    </div>
                                </div>
                                <div class="process flex-a flex-b">
                                    <div class="flex-a"><span>展开进度</span>
                                        <RectDown color="#3B84F1" size="14" />
                                    </div>
                                    <div><nut-button type="default">我要索赔</nut-button></div>
                                </div> -->
                                    <div class="open flex-a flex-b">
                                        <div>一件商品</div>
                                        <!-- <div class="blue">展开</div> -->
                                    </div>
                                    <div class="total flex-a">
                                        <span>本单预计收入</span>
                                        <!-- <Ask color="#686B72" size="14" /> -->
                                        <nut-tag type="success">已支付</nut-tag>
                                        <div class="price">￥{{ item.price }}</div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="!list && timeType == '0'">
                                <nut-empty description="暂无数据"></nut-empty>
                            </div>
                            <div :class="timeType == '1' ? 'active flex-a flex-b item' : 'flex-a flex-b item'"
                                @click="changeType('1')">
                                <div>昨日 <text></text></div>
                                <div v-if="list.length == 0">暂无订单</div>
                            </div>
                            <div class="order-detail" v-if="timeType == '1'" v-for="item in list" :key="item.id">
                                <div class="order-head flex-a flex-b">
                                    <div class="left flex-a">
                                        <span>#</span>
                                        <div>1</div>
                                        <div class="blue">尽快送达</div>
                                    </div>
                                    <div class="right">{{ item.state == 2 ? '进行中' : item.state == 4 ? '已完成' :
                        item.state == -1 ? '已取消' : '' }}
                                    </div>
                                </div>
                                <div class="order-box">
                                    <div class="order-title flex-a flex-b">
                                        <div class="name">{{ item.vipName }}</div>
                                        <div class="flex-a">
                                            <!-- <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_3.png" alt=""> -->
                                            <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                        </div>
                                    </div>
                                    <!-- <div class="info">第一次下单·收藏用户</div> -->
                                    <div class="addr">{{ item.datVipAddress.address + item.datVipAddress.detAddress
                                        }}
                                    </div>
                                    <!-- <div class="status flex-a flex-b">
                                    <div class="time flex-a">
                                        <div>12:18</div>
                                        <div>已送达（骑手:融资达）</div>
                                    </div>
                                    <div class="flex-a">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112949_18.png" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/02/29/112948.png" alt="">
                                    </div>
                                </div>
                                <div class="process flex-a flex-b">
                                    <div class="flex-a"><span>展开进度</span>
                                        <RectDown color="#3B84F1" size="14" />
                                    </div>
                                    <div><nut-button type="default">我要索赔</nut-button></div>
                                </div> -->
                                    <div class="open flex-a flex-b">
                                        <div>一件商品</div>
                                        <!-- <div class="blue">展开</div> -->
                                    </div>
                                    <div class="total flex-a">
                                        <span>本单预计收入</span>
                                        <!-- <Ask color="#686B72" size="14" /> -->
                                        <nut-tag type="success">已支付</nut-tag>
                                        <div class="price">￥{{ item.price }}</div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="!list && timeType == '1'">
                                <nut-empty description="暂无数据"></nut-empty>
                            </div>
                        </div>
                    </div>
                </nut-tab-pane>
                <!-- <nut-tab-pane title="进行中" pane-key="2">
                </nut-tab-pane>
                <nut-tab-pane title="已完成" pane-key="4"> </nut-tab-pane>
                <nut-tab-pane title="已取消/退单" pane-key="-1"> </nut-tab-pane> -->
                <!-- <nut-tab-pane title="索赔" pane-key="5"> </nut-tab-pane> -->
            </nut-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro'
import { useReachBottom } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { Category, CategoryPane } from "@nutui/nutui";
import { TriangleDown, RectDown, Search, Ask } from '@nutui/icons-vue-taro';
import { getCartList } from '../../../api/index'
export default {
    components: {
        'nut-category': Category,
        'nut-category-pane': CategoryPane,
        TriangleDown,
        RectDown,
        Search,
        Ask
    },
    setup() {
        const data = reactive({
            value: '0',
            list: [] as any,
            tab: '0',
            timeType: '',
            status: [
                {
                    title: '全部',
                    key: '0',
                },
                {
                    title: '进行中',
                    key: '2',
                },
                {
                    title: '已完成',
                    key: '4',
                },
                {
                    title: '已取消/退单',
                    key: '-1',
                }
            ],
        });
        onMounted(() => {
            getCart({ state: 0, timeType: '' })
        });
        const getCart = (state) => {
            getCartList(state).then(res => {
                if (res.code == 200) {
                    data.list = res.rows
                    // console.log(data.list)
                }
            })
        }
        const changeTab = (title, paneKey, disabled) => {
            getCart({ state: title.paneKey, timeType: data.timeType })
        }
        const change = (val) => {
            data.tab = val
            data.value = '0'
            data.timeType = ''
            if (val == '1') {
                data.timeType = '0'
            }
            getCart({ state: data.value, timeType: data.timeType })
        }
        const changeType = (val) => {
            data.timeType = val
            getCart({ state: data.value, timeType: val })
        }
        return {
            ...toRefs(data), getCart, changeTab, change, changeType
        }
    }
};
</script>
<style lang="scss">
.shop {
    .head {
        color: #fff;
        background: #3F8EE3;
        padding: 20rpx 30rpx;
        box-sizing: border-box;

        .left {
            .btn {
                margin-left: 100rpx;
                color: #4894E4;

                .day {
                    height: 50rpx;
                    line-height: 50rpx;
                    width: 140rpx;
                    text-align: center;
                    border-radius: 10rpx 0 0 10rpx;
                    background: #3F8EE3;
                    box-sizing: border-box;
                    color: #fff;
                    border: 1rpx solid #fff;
                }

                .jin {
                    height: 50rpx;
                    line-height: 50rpx;
                    width: 140rpx;
                    text-align: center;
                    border-radius: 0 10rpx 10rpx 0;
                    background: #3F8EE3;
                    box-sizing: border-box;
                    color: #fff;
                    border: 1rpx solid #fff;
                }

                .active {
                    background: #fff !important;
                    color: #3F8EE3 !important;
                    border: 1rpx solid #fff !important;
                }

                .date {
                    height: 50rpx;
                    line-height: 50rpx;
                    width: 180rpx;
                    padding-left: 20rpx;
                    white-space: nowrap;
                    border-radius: 0 10rpx 10rpx 0;
                    background: #3F8EE3;
                    color: #fff;
                    border: 1rpx solid #82B6ED;
                    border-left: none;
                    box-sizing: border-box;
                }
            }
        }

        .right {}
    }

    .order-box {

        .item {
            color: #686868;
            margin-bottom: 10rpx;
            font-size: 28rpx;

            .blue {
                color: #4495E4;
            }
        }

        .item.active {
            color: #4495E4;
        }


        .order-detail {
            background: #ffff;
            border-radius: 5rpx;
            margin-bottom: 20rpx;

            .order-head {
                padding: 20rpx;

                .left {
                    color: #2D2D2D;
                    font-size: 50rpx;

                    span {
                        font-size: 26rpx;
                    }

                    .blue {
                        color: #4495E4;
                        font-size: 28rpx;
                        margin-left: 20rpx;
                    }
                }

                .right {
                    color: #6C6C6C;
                }
            }

            .order-box {
                padding: 0 30rpx 30rpx 30rpx;

                .order-title {
                    border-top: 1rpx solid #ECECEC;
                    padding-top: 20rpx;

                    .name {}

                    img {
                        width: 50rpx;
                        height: 50rpx;
                        margin-left: 20rpx;
                    }
                }

                .info {
                    color: #9B9B9B;
                    font-size: 22rpx;
                    margin: 30rpx 0 10rpx;
                }

                .addr {
                    color: #838383;
                    font-size: 30rpx;
                    width: 70%;
                    padding-bottom: 20rpx;
                }

                .status {
                    border-top: 1rpx solid #ECECEC;
                    padding-top: 20rpx;

                    .time {
                        color: #878787;

                        div {
                            margin-right: 20rpx;
                        }
                    }

                    img {
                        width: 50rpx;
                        height: 50rpx;
                        margin-left: 20rpx;
                    }
                }

                .process {
                    color: #3B84F1;
                    padding: 20rpx 0;
                    border-bottom: 1rpx solid #ECECEC;

                    span {
                        margin-right: 10rpx;
                    }

                    .nut-button {
                        border-color: #3B84F1;
                        color: #3B84F1;
                        transform: scale(0.8);
                    }
                }

                .open {
                    padding: 30rpx 0;
                    border-bottom: 1rpx solid #ECECEC;
                    font-size: 30rpx;
                    color: #4F4F4F;

                    .blue {
                        color: #3B84F1;
                        font-size: 26rpx;
                    }
                }

                .total {
                    padding: 30rpx 0;
                    font-size: 28rpx;
                    justify-content: flex-end;

                    span {
                        color: #3F3F3F;
                        margin-right: 10rpx;
                    }

                    .nut-tag {
                        margin: 0 30rpx 0 20rpx;
                    }

                    .price {
                        color: #E0A336;
                    }
                }
            }
        }
    }
}

.nut-tab-pane {
    padding: 15rpx 20rpx !important;
    background: #F0F0F0;
}
</style>